import React, { Component } from 'react';
import styles from './common.css';
import { Divider, Table} from 'antd';

const columns = [
  {
    title: '操作',
    dataIndex: 'operate',
    key: 'operate',
    render: text => <span className={styles.text}>{text}</span>,
    width: '15%',
  },
  {
    title: '适用范围',
    dataIndex: 'application',
    key: 'application',
    width: '50%',
    render: text => <div className={styles.text}>{text}</div>,
  },
  {
    title: '权限说明',
    dataIndex: 'limit',
    key: 'limit',
    width: '35%',
    render: text => <div className={styles.text}>{text}</div>,
  },
];

const data = [
  {
    key: '1',
    operate: '录用',
    application: '仅适用于报名并且没有被拒绝没有被录用的工作',
    limit: '仅有管理员有权权限',
  },
  {
    key: '2',
    operate: '拒绝',
    application: '仅适用于报名并且没有被拒绝没有被录用的工作',
    limit: '仅有管理员有权权限',
  },
  {
    key: '3',
    operate: '签到',
    application: '仅适用于录用后的工作',
    limit: '',
  },
  {
    key: '4',
    operate: '签退',
    application: '仅适用于签到后的工作',
    limit: '',
  },
  {
    key: '5',
    operate: '未到',
    application: '仅适用于录用后的工作',
    limit: '',
  },
  {
    key: '6',
    operate: '未完',
    application: '仅适用于签到后的工作',
    limit: '',
  },
  {
    key: '7',
    operate: '发工资',
    application: '仅适用于未完和签到后的工作',
    limit: '仅有管理员有权权限',
  },
]


export default class AccountManagement extends Component {

  render() {
    return(
      <div className={styles.content}>
        <div className={styles.header}>工作管理说明</div>
        <div className={styles.text}>结合实际运营情况，我们为企业定制了以下9种操作，操作和操作之间有一定的依赖性，描述如下:</div>
        <Divider />
        <div className={styles.table}>
          <Table columns={columns} dataSource={data} pagination={false} />
        </div>
      </div>
    );
  }
};